{extend name="public/container"}
{block name="content"}
<style type="text/css">
    .el-select {width: 100%;}
</style>
<div id="myApp" v-cloak>
    <div class="padding-10">
        <div class="douxue-filter flex flex-between" style="margin-bottom:20px;">
            <el-form :inline="true" :model="where" size="mini" class="flex">
                <div class="flex flex-between">
                    <el-form-item>
                        <el-select :clearable=true placeholder="项目类型" v-model="where.rel_type">
                            <el-option label="{:lang('Package')}" key="package" value="package"></el-option>
                            <el-option label="{:lang('Service')}" key="service" value="service"></el-option>
                            <el-option label="{:lang('Goods')}" key="goods" value="goods"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input v-model="where.keyword" placeholder="项目名称">
                            <el-button slot="append" size="small" type="success" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>

            <el-button type="primary" size="mini" @click="doAdd()">新增拼团</el-button>
        </div>
    </div>

    <div class="padding-10">
        <el-table
            :data="rows"
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            size="mini">
            <el-table-column
                prop="rel_type"
                label="项目类型"
                align="left">
                <template slot-scope="scope">
                    <template v-if="scope.row.rel_type == 'package'">{:lang('Package')}</template>
                    <template v-else-if="scope.row.rel_type == 'service'">{:lang('Service')}</template>
                    <template v-else-if="scope.row.rel_type == 'goods'">{:lang('Goods')}</template>
                    <template v-else>-</template>
                </template>
            </el-table-column>

            <el-table-column
                prop="rel_name"
                label="项目名称"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pink_nums"
                label="成团数量"
                align="left">
            </el-table-column>

            <el-table-column
                prop="pink_price"
                label="成团价格"
                align="left">
            </el-table-column>

            <el-table-column
                prop="start_time"
                label="开始时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                prop="end_time"
                label="结束时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                label="状态"
                align="left">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-color="#ff6a6c"
                        inactive-color="#999"
                        :active-value="1"
                        :inactive-value="0"
                        @change="doSetStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column
                prop="create_time"
                label="创建时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                prop="create_by"
                label="创建人"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                prop="update_time"
                label="更新时间"
                width="140"
                align="left">
            </el-table-column>

            <el-table-column
                prop="update_by"
                label="更新人"
                width="80"
                align="left">
            </el-table-column>

            <el-table-column
                label="操作"
                width="130"
                fixed="right"
                align="left">
                <template slot-scope="scope">
                    <el-link type="primary" size="mini" :underline="false" @click="doAdd(scope.row)">编辑</el-link>
                    <el-link type="danger" size="mini" :underline="false" @click="doDelete(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>

    <!-- 添加/编辑   -->
    <el-dialog title="新增/编辑" :visible.sync="dialogFormVisible" width="70%" :close-on-click-modal="false" :fullscreen="true">
        <el-form :model="formData" :rules="rules" size="small" ref="formData" label-width="100px" >
            <el-form-item label="项目类型" prop="rel_type">
                <el-select :clearable=true placeholder="项目类型" v-model="formData.rel_type" @change="selectRelEntry">
                    <el-option label="{:lang('Package')}" key="package" value="package"></el-option>
                    <el-option label="{:lang('Service')}" key="service" value="service"></el-option>
                    <el-option label="{:lang('Goods')}" key="goods" value="goods"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="项目名称" prop="rel_name">
                <el-input v-model="formData.rel_name" placeholder="项目名称" :disabled="true" autocomplete="off">
                    <el-button slot="append" size="small" type="success" @click="selectRelEntry">筛选</el-button>
                </el-input>
            </el-form-item>

            <el-form-item label="项目选择" prop="rel" v-if="rel_entries.length > 0 && showRelEntry">
                <el-table
                    :data="rel_entries.filter(data => !rel_search || data.name.toLowerCase().includes(rel_search.toLowerCase()))"
                    style="width: 100%">
                    <el-table-column
                      label="名称"
                      prop="name">
                    </el-table-column>
                    <el-table-column
                      label="价格"
                      prop="price">
                    </el-table-column>
                    <el-table-column
                      align="right">
                      <template slot="header" slot-scope="scope">
                        <el-input
                          v-model="rel_search"
                          size="mini"
                          placeholder="输入关键字搜索"/>
                      </template>
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="confirmRelEntry(scope.row)"
                          type="danger">确认
                        </el-button>
                      </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                        small
                        :hide-on-single-page="true"
                        layout="prev, pager, next"
                        :total="relRowsCount"
                        :page-size="rel_where.limit"
                        @current-change="selectRelEntry">
                    </el-pagination>
                </div>
            </el-form-item>

            <el-form-item label="拼团价" prop="pink_price">
                <el-input v-model="formData.pink_price" placeholder="拼团价" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="拼团人数" prop="pink_nums">
                <el-input v-model="formData.pink_nums" placeholder="拼团人数" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="开始时间" prop="start_time">
                <el-date-picker
                    v-model="formData.start_time"
                    type="datetime"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="截止时间" prop="end_time">
                <el-date-picker
                    v-model="formData.end_time"
                    type="datetime"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('formData')">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var formData = {
        id:0,
        rel_type:'',
        rel_id:0,
        rel_name:'',
        pink_nums:2,
        pink_price:0,
        start_time:'',
        end_time:'',
        status:1,
    }
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                rowsCount: 0,
                rows: [],
                where: {
                    keyword: '',
                    rel_type:'',
                    page:1,
                    limit:pageSize,
                },
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                loading:false,
                dialogFormVisible: false,
                formData:formData,
                rules: {
                    rel_type: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    rel_id: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    rel_name: [
                        { required: true, message: '此项不能为空', trigger: 'blur' }
                    ],
                    pink_price:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ],
                    pink_nums:[
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                showRelEntry:true,
                rel_entries:[],
                rel_search:'',
                rel_where:{
                    page:1,
                    limit:6,
                }
            }
        },
        methods: {
            doSetStatus (row) {
                axios.get(Url({a:'set_status',q:{status:row.status,id:row.id}}))
                    .then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                            onClose: _ => {
                                if (res.data.code !== 200) {
                                    this.doLoadRows()
                                }
                            }
                        })
                    })
            },
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                .then(res => {
                    this.rows = res.data.data
                    this.rowsCount =res.data.count
                    this.loading = false
                })
            },
            doAdd (row) {
                if ( row == undefined ) {
                    this.formData = formData
                } else {
                    this.formData = row
                }
                this.dialogFormVisible = true
            },
            doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            },
            selectRelEntry ( page ) {
                if ( !this.formData.rel_type ) return this.$message.error('请先选择项目类型')

                let rel_c = ''
                if ( this.formData.rel_type == 'package' ) {
                    rel_c = 'package.package'
                }
                if ( this.formData.rel_type == 'service' ) {
                    rel_c = 'service.service'
                }
                if ( this.formData.rel_type == 'goods' ) {
                    rel_c = 'goods.goods'
                }
                this.showRelEntry = true
                this.rel_where.page  = page || 1
                axios.get(Url({c:rel_c,a:'get_list' , q:this.rel_where}))
                .then(res => {
                    this.rel_entries = res.data.data
                    this.relRowsCount =res.data.count
                })
            },
            confirmRelEntry ( relEntry ) {
                this.formData.rel_id   = relEntry.id
                this.formData.rel_name = relEntry.name
                this.showRelEntry = false
            },
            onSubmit:function (formName) {
                this.$refs[formName].validate((valid) => {
                    if ( valid ) {
                        axios.post(Url({a:'save'}) , this.formData).then(res => {
                            if ( res.data.code == 200 ) {
                                this.dialogFormVisible = false
                                this.doLoadRows()
                                return this.$message.success('操作成功')
                            }

                            return this.$message.error(res.data.msg)
                        }).catch(_ => {
                            console.warning(_)
                            return this.$message.error('操作失败')
                        })
                    }
                });
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}